<template>
  <div class="demo">
    <div class="demo-title">随页面滚动的固定表头和滚动条</div>
    <div class="demo-content">
      <Table sticky :columns="columns" :data-source="data" :scroll="{ x: 1500 }">
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'operation'"><a>action</a></template>
        </template>
        <template #summary>
          <Table.Summary :fixed="fixedTop ? 'top' : 'bottom'">
            <Table.Summary.Row>
              <Table.Summary.Cell :index="0" :col-span="2">
                <Switch
                  v-model:checked="fixedTop"
                  checked-children="Fixed Top"
                  un-checked-children="Fixed Top"
                ></Switch>
              </Table.Summary.Cell>
              <Table.Summary.Cell :index="2" :col-span="8">Scroll Context</Table.Summary.Cell>
              <Table.Summary.Cell :index="10">Fix Right</Table.Summary.Cell>
            </Table.Summary.Row>
          </Table.Summary>
        </template>
      </Table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Switch from '@sscd/switch';
  import Table from '@sscd/table';
  import type { TableColumnsType } from '@sscd/table';
  const fixedTop = ref(false);
  const columns = ref<TableColumnsType>([
    {
      title: 'Full Name',
      width: 100,
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
    },
    {
      title: 'Age',
      width: 100,
      dataIndex: 'age',
      key: 'age',
      fixed: 'left',
    },
    {
      title: 'Column 1',
      dataIndex: 'address',
      key: '1',
      width: 150,
    },
    {
      title: 'Column 2',
      dataIndex: 'address',
      key: '2',
      width: 150,
    },
    {
      title: 'Column 3',
      dataIndex: 'address',
      key: '3',
      width: 150,
    },
    {
      title: 'Column 4',
      dataIndex: 'address',
      key: '4',
      width: 150,
    },
    {
      title: 'Column 5',
      dataIndex: 'address',
      key: '5',
      width: 150,
    },
    {
      title: 'Column 6',
      dataIndex: 'address',
      key: '6',
      width: 150,
    },
    {
      title: 'Column 7',
      dataIndex: 'address',
      key: '7',
      width: 150,
    },
    { title: 'Column 8', dataIndex: 'address', key: '8' },
    {
      title: 'Action',
      key: 'operation',
      fixed: 'right',
      width: 100,
    },
  ]);
  const data: any = ref([]);
  for (let i = 0; i < 100; i++) {
    data.value.push({
      key: i,
      name: `Edrward ${i}`,
      age: 32,
      address: `London Park no. ${i}`,
    });
  }
</script>
